<template>
    <div style="margin:20px;padding:20px;background-color:#fff;">
        <h3>新增管理员信息填写</h3>
        <el-form ref="form" :rules="rules" :model="form" label-width="80px" size="small" label-position="left">
        <el-form-item label="姓名" prop="username">
            <el-input v-model="form.username" style="width:200px;" placeholder="请输入管理员姓名"></el-input>
        </el-form-item>
        <el-form-item label="手机号" prop="phone">
            <el-input v-model.number="form.phone" maxlength="11" style="width:200px;" placeholder="请填写手机号"></el-input>
        </el-form-item>
        <el-form-item label="所属公司" prop="company">
            <el-select v-model="form.company" placeholder="请选择公司">
                <el-option v-for="item in company"
                    :key="item.value"
                    :label="item.name"
                    :value="item.value">
                </el-option>
            </el-select>
        </el-form-item>
        <el-form-item label="所属部门">
            <el-input v-model="form.department" style="width:200px;" placeholder="请填写所属部门"></el-input>
        </el-form-item>
        <el-form-item label="角色">
            <el-select v-model="form.role" placeholder="请选择角色">
                <el-option v-for="item in role"
                    :key="item.value"
                    :label="item.name"
                    :value="item.value">
                </el-option>
            </el-select>
        </el-form-item>
        <el-form-item label="认证图片">
            <el-upload
            action=""
            list-type="picture-card"
            :on-preview="handlePictureCardPreview"
            :on-remove="handleRemove">
            <i class="el-icon-plus"></i>
            </el-upload>
        </el-form-item>
        <el-form-item>
            <el-button type="primary" @click="onSubmit">立即创建</el-button>
        </el-form-item>
        </el-form>
    </div>
</template>

<script>
    export default {
        data() {
            return {
                form: {
                    username: '',
                    phone: '',
                    department: '',
                    company: '',
                    address:[],
                    addressInfo:'',
                    scale:'',
                    industry:'',
                    email:'',
                    cash:'',
                    remark:'',
                    pictures:'',
                    dialogVisible:true,
                    dialogImageUrl:'',
                },
                rules: {
                    username: [
                        { required: true, message: '请输入用户姓名', trigger: 'blur' },
                        { min: 2, max: 5, message: '长度在 2 到 5 个字符', trigger: 'blur' }
                    ],
                    company: [
                        { required: true, message: '请输入公司名称', trigger: 'blur' },
                    ],
                    phone:[
                        { required: true, message: '请输入手机号', trigger: 'blur'},
                        { type:'number',min: 10000000000, max: 19999999999, message: '请输入正确的手机号', trigger: 'blur'}
                    ],
                    address:[
                        { required: true, message: '请选择地址', trigger: 'change'},
                    ],
                    addressInfo:[
                        { required: true, message: '请填写详细地址', trigger: 'blur'},
                    ]
                },
                isIndeterminate: false,
                checkAll:false,
                dialogImageUrl: '',
                dialogVisible: false,
                company:[],
                role:[],
            }
        },
        mounted(){
            this.getCompanyRole()
        },
        methods: {
            onSubmit() {
                console.log('submit!');
                this.$axios({
                    url: this.$url.admin,
                    method:'post',
                    data:{
                        username:this.form.username,
                        phone:this.form.phone,
                        department:this.form.department,
                        company_code:this.form.company,
                        manager_company:'1',
                        pictures:this.form.pictures,
                        role_id:this.form.role
                    }
                }).then(response=>{
                    if(response.data.result.success){
                    }
                }).catch(error=>{
                    console.log(error);
                })
            },
            getCompanyRole(){
                this.$axios({
                    url: this.$url.company,
                    method:'get',
                }).then(response=>{
                    if(response.data.result.success){
                        let option = []
                        for(let value of response.data.content.data){
                            option.push({name:value.name,value:value.id})
                        }
                        this.company = option
                    }
                }).catch(error=>{
                    console.log(error);
                })
                this.$axios({
                    url: this.$url.role,
                    method:'get',
                }).then(response=>{
                    if(response.data.result.success){
                        let option = []
                        for(let value of response.data.content.data){
                            option.push({name:value.name,value:value.id})
                        }
                        this.role = option
                    }
                }).catch(error=>{
                    console.log(error);
                })
            },
            handleRemove(file, fileList) {
                console.log(file, fileList);
            },
            handlePictureCardPreview(file) {
                this.dialogImageUrl = file.url;
                this.dialogVisible = true;
            },
            handleCheckAllChange(){

            },
        },
    }
</script>

<style scoped>

</style>